<template>
  <div class="hello">
    <div id="maobei">
      <div id="title">{{ title }}</div>
      <div id="choose">
        <div class="one">
          <div>类型 :<el-button type="text" @click="all()">全部</el-button>&nbsp;&nbsp;&nbsp;</div>
          <div class="xunhuan" v-for="c in choose1"><el-button type="text" @click="getMovie1(allData2,c.tname)">{{ c.tname }}</el-button></div>
        </div>
        <div class="one">
          <div>区域 :&nbsp;&nbsp;&nbsp;</div>
          <div class="xunhuan" v-for="a in choose2"><el-button type="text" @click="getMovie2(tname,a.aname)">{{ a.aname }}</el-button></div>
        </div>
      </div>

      <div id="bottom">
        <!-- <div class="s1">正在热映</div> -->
        &nbsp;
        <p />
        &nbsp;
        <p />
        <div>
          <!-- &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; -->
        <div v-if="allData1.length>0">
           <div v-if="allData2.length>0"> 
        
          <span class="c1" v-for="s in allData2"
            ><img @click="buy(s.mid)"
              class="ig"
              v-bind:src="s.mpic"
            />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img
              class="ig"
              v-bind:src="s.mpic"
            />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img
              class="ig"
              v-bind:src="s.mpic"
            />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span
          >
          </div>
          <div v-else-if="allData2.length==0">
           <h1>抱歉，没有找到相关结果，请尝试用其他条件筛选。</h1>
          </div>
          <div v-else>
           <span class="c1" v-for="s in allData1"
            ><img @click="buy(s.mid)"
              class="ig"
              v-bind:src="s.mpic"
            />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img
              class="ig"
              v-bind:src="s.mpic"
            />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img
              class="ig"
              v-bind:src="s.mpic"
            />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span
          ></div>
        </div>
         <div v-else> 
          <span class="c1" v-for="s in allData"
            ><img @click="buy(s.mid)"
              class="ig"
              v-bind:src="s.mpic"
            />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img
              class="ig"
              v-bind:src="s.mpic"
            />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img
              class="ig"
              v-bind:src="s.mpic"
            />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span
          >
          </div>
          </div>
        </div>
        <!-- <div class="s1">即将上映</div>
      <div>
        <span class="c1" v-for="s in allData"
          ><img class="ig" v-bind:src="s.mpic" />
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;</span>
      </div> -->
        <div class="foot"><img src="../assets/foot.png" /></div>
      </div>
    </div>
</template>

<script>
import axios from "axios";
export default {
  name: "HelloWorld",
  data() {
    return {
      title: "正在热映",
      choose1: [],
      choose2: [],
      allData: {},
      allData1: {},
      message: {},
      tname:{},
      allData2: {},
    };
  },
  methods: {
    getAllMovie: function () {
      axios.get("api/movie/getAll").then((res) => {
        console.log(res.data);
        this.allData = res.data;
        console.log(this.allData);
      });
    },
    getAllType: function () {
      axios.get("api/type/selectAll").then((res) => {
        this.choose1 = res.data;
      });
    },
    selectAllarea: function () {
      axios.get("api/area/selectAll").then((res) => {
        this.choose2 = res.data;
      });
    },
    getMovie1: function (allData2,tname) {
      this.tname=tname;
      axios.get("api/movie/getMovie1?tname=" + tname).then((res) => {
        // console.log(res.data);
        console.log(allData2);
        this.allData1 = res.data;
        //  alert(tname);u

        // alert(tname);
      });
    },
    // movies=" + allData1+"&
    getMovie2: function (tname,aname) {
        axios.get("api/movie/getMovie2?tname="+tname+"&aname="+aname).then((res) => {
        console.log(res.data);
        this.allData2 = res.data;
      // alert(res.data);
      // this.allData1 = res.data;
      //  console.log(allData1,aname);
      //  alert(tname);
      //  alert(aname);
        });
    },
    // function(){
    //     axios.get("api/movie/getAll").then((res) => {
    //     console.log(res.data);
    //     this.allData = res.data;
    //     console.log(this.allData);
    //   });
    // }
    all() {
      //  this.$router.push('/detailone');
      this.$router.go(0);
      //alert("heh");
    },
    buy:function(mid){
     
      this.$router.push({ name: "details", params: { mid: mid } });
    }
  },
  mounted() {
    // this.uname=this.$route.params.uname
    // alert(this.uname)
    //  if(this.uname!==null && this.uname!==undefined && this.uname!==""){
    //   this.showinfo= true
    //   }
    this.getAllMovie();
    this.getAllType();
    this.selectAllarea();
    //  this.getMovie2();
    // this.all();
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
#title {
  /* 背景色 */
  background-color: #47464a;
  /* 字体颜色 */
  -webkit-text-fill-color: red;
  /* 字体大小 */
  font-size: 17px;
  /* 字体居中 */
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* div大小设置 */
  width: auto;
  height: 60px;
  border: solid red 1px;
}

#choose {
  margin-top: 40px;
  margin-left: 190px;
  width: 1100px;
  height: 181px;
  border: solid #f2f2f2 1px;
}

.one {
  width: 1084px;
  height: 72px;
  border: solid #f2f2f2 1px;

  text-align: left;

  padding: 8px;
}
/* .c1 {
  font-size: 20px;
  color: rgb(90, 20, 220);
}
.s1 {
  margin-left: 10px;
  font-size: 30px;
  padding-right: 70%;
} */
.ig {
  margin-top: 20px;
}
#bottom {
  width: auto;
  /* height: 15%; */
  /* border:1px solid red; */
  margin: center;
}
.foot img {
  width: 1500px;
  /* height: 15%; */
  /* border:1px solid red; */
  margin: center;
}
#maobei {
  background: url("../assets/maobei.jpg") no-repeat;
  background-size: cover;
  background-position: center;
  font: 14px/1.5 tahoma, arial, "Hiragino Sans GB", "\5b8b\4f53", sans-serif;
  color: #4d4d4d;
  /* 这个属性可以使页面上的字体抗锯齿,使用后字体看起来会更清晰舒服 */
  -webkit-font-smoothing: antialiased;
  font-weight: 300;
}
.xunhuan {
  float: left;
  margin-left: 50px;
}
</style>
